<template>
  <!-- 头部部分 -->
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      placeholder="请输入任务名称"
      autofocus
      v-model="item.name"
      @keyup.enter="add"
    />
  </header>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      item: { id: "", name: "", done: false },
    };
  },
  methods: {
    add() {
      if (this.name === "") return alert("请输入内容");
      this.list.length > 0
        ? (this.item.id = this.list[this.list.length - 1].id + 1)
        : (this.item.id = 1);
      this.$emit("add-event", this.item);
      this.item.id = this.item.name = "";
    },
  },
};
</script>

<style></style>
